<template>
  <div style="background:rgb(242,242,242)">
    <div style="position:relative;margin-top:8px">
      <div class="lef c1">
        <img
          src="//storage.jd.com/karma/image/20170220/6acefcb18028492bb86915af9be7af5c.png"
          alt=""
        />
        <h5> 订单类> </h5>
      </div>
      <div class="ris">
        <div class="li" style="border-right:1px solid #efefef;border-bottom:1px solid #efefef">自营三方区分</div>
        <div class="li">订单拆分原因</div>
        <div class="li">价保退回原则</div>
        <div class="li" style="border-top:1px solid #efefef;border-left:1px solid #efefef">家电价保原则</div>
      </div>
    </div>
        <div style="position:relative;margin-top:8px">
      <div class="lef c2">
        <img
          src="//storage.jd.com/karma/image/20170220/709f88dab8bd41feb6cc5900e37ed627.png"
          alt=""
        />
        <h5> 配送类> </h5>
      </div>
      <div class="ris">
        <div class="li" style="border-right:1px solid #efefef;border-bottom:1px solid #efefef">配送自提介绍</div>
        <div class="li">全球售运费</div>
        <div class="li">商品破损问题</div>
        <div class="li" style="border-top:1px solid #efefef;border-left:1px solid #efefef">制定快递送货</div>
      </div>
    </div>    <div style="position:relative;margin-top:8px">
      <div class="lef c1">
        <img
          src="//storage.jd.com/karma/image/20170220/8859ed22f51e4c32ac07ce31195f0617.png"
          alt=""
        />
        <h5> 账户&协议> </h5>
      </div>
      <div class="ris">
        <div class="li" style="border-right:1px solid #efefef;border-bottom:1px solid #efefef">京东隐私政策</div>
        <div class="li">用户注册协议</div>
        <div class="li">企业用户注册</div>
        <div class="li" style="border-top:1px solid #efefef;border-left:1px solid #efefef">PLUS会员开通</div>
      </div>
    </div>    <div style="position:relative;margin-top:8px">
      <div class="lef c2">
        <img
          src="//storage.jd.com/karma/image/20170220/85b80024f3da424c9eac2e8fe7580588.png"
          alt=""
        />
        <h5> 售后类> </h5>
      </div>
      <div class="ris">
        <div class="li" style="border-right:1px solid #efefef;border-bottom:1px solid #efefef">售后运费规则</div>
        <div class="li">售后运费收取</div>
        <div class="li">空调安装收费</div>
        <div class="li" style="border-top:1px solid #efefef;border-left:1px solid #efefef">售后返回方式</div>
      </div>
    </div>    <div style="position:relative;margin-top:8px">
      <div class="lef c1">
        <img
          src="//storage.jd.com/karma/image/20170220/ff47c6c6096645e388e106c5b80d7d77.png"
          alt=""
        />
        <h5> 财务类> </h5>
      </div>
      <div class="ris">
        <div class="li" style="border-right:1px solid #efefef;border-bottom:1px solid #efefef">货到付款支付</div>
        <div class="li">京东E卡支付</div>
        <div class="li">小白信用介绍</div>
        <div class="li" style="border-top:1px solid #efefef;border-left:1px solid #efefef">京东白条注销</div>
      </div>
    </div>    <div style="position:relative;margin-top:8px">
      <div class="lef c2">
        <img
          src="//storage.jd.com/karma/image/20170220/9bef1a670eca44bba7de48521f0a286b.png"
          alt=""
        />
        <h5> 活动&购买> </h5>
      </div>
      <div class="ris">
        <div class="li" style="border-right:1px solid #efefef;border-bottom:1px solid #efefef">选购指数介绍</div>
        <div class="li">电子书介绍</div>
        <div class="li">配送延迟补贴</div>
        <div class="li" style="border-top:1px solid #efefef;border-left:1px solid #efefef">原厂上门检修</div>
      </div>
    </div>    <div style="position:relative;margin-top:8px">
      <div class="lef c1">
        <img
          src="//storage.jd.com/karma/image/20210429/57d7f9c1d52e4822b260bf642b041e44.png"
          alt=""
        />
        <h5> 历史规则> </h5>
      </div>
      <div class="ris">
        <div class="li" style="border-right:1px solid #efefef;border-bottom:1px solid #efefef">京豆如何获得</div>
        <div class="li">京东注册协议</div>
        <div class="li">京东隐私政策</div>
        <div class="li" style="border-top:1px solid #efefef;border-left:1px solid #efefef">京豆的有效期</div>
      </div>
    </div>
    <!-- <div class="dao">
        <div>
            <img src="" alt="">
            <p>电话客服</p>
        </div>
        <div>
            <img src="" alt="">
            <p>在线客服</p>
        </div>
        <div>
            <img src="" alt="">
            <p>服务进度</p>
        </div>
        </div>     -->
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
* {
    margin: 0;
    padding: 0;
}
.lef {
  width: 93px;
  height: 93px;
  display: flex;
  flex-direction: column;
  /* justify-content: space-around; */
  align-items: center;
  position: relative;

  /* display: inline-block; */
  /* float: left; */
}
.c2 {
    background-color: #fdecd2;
    color: #f6ab5b;
}
.c1 {
  background-color: #e9edfe;
    color:#8999df;

}
.lef img {
  width: 39px;
  height: 42px;
  margin-top: 10px;
}
.lef h5 {
    /* font-size: 12px; */
    font-weight: 700;
    position: absolute;
    bottom: 18px;

}
.ris {
    display: flex;
    flex-wrap: wrap;
    width: 282px;
    position: absolute;
    top:0;
    left:93px;
    height: 93px;
    background-color: #fff;
}
.li {
    height: 50%;
    width: 49.5%;
    font-size: 13px;
    color: #686868;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dao{
    display: flex;
    height: 60px;
    position: fixed;
    bottom: 0;
}
</style>